<template>
  <van-pull-refresh
    v-model="refreshing"
    :success-text="successText"
    :disabled="refreshDisabled"
    @refresh="onRefresh"
  >
    <div slot="loading" />
    <van-list
      ref="vanList"
      v-model="loading"
      :offset="offset"
      :immediate-check="immediateCheck"
      :error.sync="error"
      :finished="finished"
      :loading-text="loadingText"
      :error-text="errorText"
      :finished-text="finishedText"
      @load="onLoad"
    >
      <slot name="list">
        <div class="page-list van-clearfix">
          <slot />
        </div>
      </slot>
    </van-list>
  </van-pull-refresh>
</template>
<script>
export default {
  name: 'PageList',
  props: {
    load: {
      type: Function,
      default: undefined
    },
    refresh: {
      type: Function,
      default: undefined
    },
    finished: {
      type: Boolean,
      default: false
    },
    setPageSize: {
      type: Number,
      default: 20
    },
    setPage: {
      type: Number,
      default: 1
    },
    resetFun: {
      type: Function,
      default: () => {}
    },
    componentName: {
      type: String,
      default: ''
    },
    immediateCheck: {
      type: Boolean,
      default: true
    },
    offset: {
      type: Number,
      default: 300
    },
    finishedText: {
      type: String,
      default: '没有更多了'
    },
    refreshDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      refreshing: false,
      loading: false,
      error: false,
      loadingText: '加载中...', // 加载中...
      errorText: '加载错误！单击重试！',
      successText: '刷新成功',
      page: 1,
      pageSize: 10,
      isActive: true
    }
  },
  created() {
    this.resetPageData()
  },
  activated() {
    // 缓存路由才生效
    this.isActive = true
  },
  deactivated() {
    // 缓存路由才生效
    this.isActive = false
  },
  methods: {
    async promiseFun(fun, eventName, ...args) {
      if (fun instanceof Function) {
        return await fun(...args)
      }
      this.$emit(eventName, ...args)
    },
    onLoad() {
      this.promiseFun(this.load, 'loaded', this.page, this.pageSize).then(res => {
        this.error = false
        this.page++
        return res
      }).catch(e => {
        if (e === 'noError') {
          this.errorText = ''
        } else {
          this.errorText = '加载错误！单击重试！'
        }
        this.$emit('update:finished', false)
        this.error = true
        return Promise.reject(e)
      }).finally(() => {
        this.loading = false
        this.refreshing = false
      })
    },
    onRefresh() {
      this.$emit('update:finished', true)
      this.resetPageData()
    },
    // 重置分页数据
    resetPageData(page, pageSize) {
      if (!this.isActive) return
      this.pageSize = pageSize || this.setPageSize
      this.page = page || this.setPage
      this.$emit('update:finished', false)
      this.error = false
      this.loading = false
      this.resetFun()
      if (this.$refs.vanList) {
        this.$refs.vanList.check()
      }
    }
  }
}
</script>

<style lang="less">

</style>
